<template>
  <div ref="chartRef" style="height: 100%"></div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
import * as echarts from 'echarts'

interface Props {
  chartData: any[]
}

const props = withDefaults(defineProps<Props>(), {})
const chartRef = ref<HTMLDivElement | null>(null)
let chartInstance: echarts.ECharts | null = null

const baseColors = [
  ['rgba(147,227,211,1)', 'rgba(147,227,211,0.6)'],
  ['rgba(224,133,127,1)', 'rgba(224,133,127,0.6)'],
  ['rgba(140,191,240,1)', 'rgba(140,191,240,0.6)'],
  ['rgba(246,207,139,1)', 'rgba(246,207,139,0.6)'],
  ['rgba(250,100,100,0.8)', 'rgba(250,180,150,0.6)'],
  ['rgba(250,156,62,0.8)', 'rgba(250,210,140,0.6)'],
  ['rgba(250,200,50,0.8)', 'rgba(250,230,160,0.6)'],
  ['rgba(50,199,50,0.8)', 'rgba(120,240,120,0.6)'],
  ['rgba(157,97,242,0.8)', 'rgba(200,160,255,0.6)'],
  ['rgba(58,147,242,0.8)', 'rgba(150,200,255,0.6)']
]

onMounted(() => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
    initChart()
  }
})

watch(
  () => props.chartData,
  () => {
    if (chartInstance) initChart()
  },
  { deep: true }
)

const initChart = () => {
  const option: echarts.EChartsOption = {
    tooltip: { trigger: 'item' },
    legend: {
      top: '2%',
      icon: 'roundRect',
      left: 'center'
      // data: (props.chartData || []).map((item, i) => ({
      //   ...item,
      //   itemStyle: {
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       { offset: 0, color: baseColors[i % baseColors.length][0] },
      //       { offset: 1, color: baseColors[i % baseColors.length][1] }
      //     ])
      //   }
      // }))
    },
    series: [
      {
        type: 'pie',
        radius: ['20%', '40%'],
        padAngle: 0.6,
        avoidLabelOverlap: false,
        // 使用渐变色
        itemStyle: {
          color: (params: any) => {
            const [start, end] = baseColors[params.dataIndex % baseColors.length]
            return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              { offset: 0, color: start },
              { offset: 1, color: end }
            ])
          }
        },
        label: {
          show: true,
          position: 'outside',
          alignTo: 'labelLine',
          // 多行左对齐
          align: 'left',
          formatter: (params: any) => {
            return `{name|${params.name}}\n{value|${params.value}}`
          },
          rich: {
            name: {
              fontSize: 14,
              color: '#333',
              align: 'left',
              lineHeight: 20
            },
            value: {
              fontSize: 12,
              color: '#333',
              align: 'left'
            }
          }
        },

        data: (props.chartData || []).map((item, i) => ({
          ...item,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: baseColors[i % baseColors.length][0] },
              { offset: 1, color: baseColors[i % baseColors.length][1] }
            ])
          },

          labelLineStyleColor: baseColors[i % baseColors.length][0]
        }))
      }
    ]
  }

  chartInstance?.setOption(option, true)

  // 添加 resize
  window.addEventListener('resize', resizeChart)
}

const resizeChart = () => {
  chartInstance?.resize()
}
function getRich() {
  let result: any = {}
  baseColors.forEach((v, i) => {
    result[`hr${i}`] = {
      backgroundColor: baseColors[i][0],
      borderRadius: 3,
      width: 3,
      height: 3,
      padding: [3, 3, 0, -12]
    }
    result[`a${i}`] = {
      padding: [-11, 6, -20, 6],
      color: baseColors[i][0],
      backgroundColor: 'transparent',
      fontSize: 12
    }
  })
  return result
}
onBeforeUnmount(() => {
  if (chartInstance) chartInstance.dispose()
  window.removeEventListener('resize', resizeChart)
})
</script>

<style scoped></style>
